<template>
  <div>
    <el-dialog
      title="租赁规则配置"
      :visible.sync="showApplication"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      width="1000px"
      class="dialog-reserve"
    >
      <QueryForm
        v-model="filters"
        :query-form-config="queryFormConfig"
        @handleQuery="getList(1)"
        @clear="clear"
      />
      <div v-if="meta.indexOf('LeaseRuleSaveOrUpdate') > -1" class="doumee_table_header">
        <el-button
          v-preventReClick
          type="primary"
          @click="addBtn"
        >新增</el-button>
      </div>
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table doumee-element-tableb"
      >
        <el-table-column
          align="center"
          label="规则名称"
          prop="name"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="押金(元)"
          prop="deposit"
          min-width="90"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="收费标准(单价/单位)"
          prop="description"
          min-width="140"
        />
        <el-table-column
          align="center"
          label="免费时长(分钟)"
          prop="freeTime"
          min-width="110"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.freeTime || 0 }}
          </template></el-table-column>
        <el-table-column
          align="center"
          label="排序码"
          min-width="90"
          prop="sort"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="创建时间"
          prop="createTime"
          min-width="160"
        />
        <el-table-column
          align="center"
          label="状态"
          min-width="70"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="'1'"
              :inactive-value="'0'"
              :disabled="meta.indexOf('LeaseRuleSaveOrUpdate') === -1"
              @change="upDateStatus(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          v-if="meta.indexOf('LeaseRuleSaveOrUpdate') > -1"
          label="操作"
          min-width="150"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <div class="flex-cc">
              <el-button
                v-preventReClick
                type="text"
                @click="toEdit(scope.row.id)"
              >编辑</el-button>
              <el-button
                v-preventReClick
                type="text"
                class="secondColor"
                @click="deleteTicket(scope.row.id)"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <Pagination
          :total="totalCount"
          :page="pagination.page"
          :page-sizes="pageSizes"
          @current-change="getList"
          @SizeChange="handleSizeChange"
        />
      </div>
    </el-dialog>
    <EditDetail v-if="isEdit" ref="EditRef" @close="showClick" />
  </div>
</template>

<script>
import {
  leaseRuleList, leaseRuleHandle, leaseRuleDetail
} from '@/api'
import store from '@/store'
import { parseTime } from '@/utils'
import Pagination from '@/components/paginations'
import QueryForm from '@/components/QueryForm'
import EditDetail from './editManage.vue'
export default {
  components: {
    QueryForm,
    EditDetail,
    Pagination
  },
  data() {
    return {
      showApplication: false,
      meta: [],
      modalDialog: store.getters.dialog,
      list: [],
      totalCount: 10,
      listLoading: false,
      pagination: {
        page: 1,
        rows: 5
      },
      isEdit: false,
      pageSizes: [5, 10, 20, 30],
      queryFormConfig: {
        formItems: [
          {
            filed: 'name',
            type: 'input',
            label: '规则名称'
          }],
        online: true
      },
      filters: {}
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
  },
  methods: {
    showClick() {
      this.isEdit = false
      this.showApplication = true
      this.getList()
    },
    addBtn() {
      this.showApplication = false
      this.isEdit = true
      this.$nextTick(() => {
        this.$refs.EditRef.showClick()
      })
    },
    toEdit(id) {
      leaseRuleDetail({
        param: {
          id
        }
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            this.showApplication = false
            this.isEdit = true
            this.$nextTick(() => {
              this.$refs.EditRef.showClick(res.record)
            })
          }
        })
        .catch(() => {})
    },
    upDateStatus(row) {
      // 更新状态
      const arr = this.list
      const obj = { ...row }
      this.listLoading = true
      leaseRuleHandle({
        param: {
          id: obj.id,
          type: '1',
          status: obj.status
        }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            if (obj.status === '1') {
              this.$message.success('启用成功')
            } else {
              this.$message.success('禁用成功')
            }
            this.getList()
          } else {
            arr.forEach((e) => {
              if (e.id === obj.id) {
                e.status = row.status === '1' ? '0' : '1'
              }
            })
            this.list = arr
          }
        })
        .catch(() => {
          this.listLoading = false
          arr.forEach((e) => {
            if (e.id === obj.id) {
              e.status = row.status === '1' ? '0' : '1'
            }
          })
          this.list = arr
        })
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    getList(page) {
      const { filters, pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = Number(page)
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      leaseRuleList({
        pagination,
        param: {
          ...filters,
          venueId: sessionStorage.getItem('venueId')
        }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.list = res.recordList
            this.totalCount = res.totalCount
            if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
              this.getList(Math.ceil(res.totalCount / pagination.rows))
            }
            this.$refs.table.doLayout()
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    clear() {
      this.filters = { time: [] }
      this.getList(1)
    },
    deleteTicket(id) {
      // 删除规则
      this.$confirm('此操作将删除该规则, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          leaseRuleHandle({
            param: {
              id: id,
              type: '2'
            }
          })
            .then((res) => {
              if (res.errorCode === '000000') {
                this.getList()
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(() => {
          // this.$message.info('已取消删除')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

</style>
